<template>
    <div class="swiper-container">
      <swiper :options="swiperOption" v-if="showSwiper">
        <swiper-slide v-for="item of swiperList" :key="item.id">
          <a href="javascript:void(0)"><img :src="item.url"></a>
        </swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
    </div>
</template>

<script>
    export default {
        name: "HomeSwiper",
      data (){
          return{
            swiperOption:{
              loop:true,
              autoplay:4000,
              autoplayDisableOnInteraction:false,
              pagination : '.swiper-pagination'
            }
            }
          },
      props:{
        swiperList:Array
      },
      computed:{
        showSwiper(){
          return this.swiperList.length;
        }
      }
    }
</script>

<style scoped lang="stylus">
    .swiper-container >>> .swiper-pagination-bullet-active
      background: #ffffff!important;
    .swiper-container
      width: 100%
      height 4.48rem
      img
        width:100%
        height:100%

</style>
